<template>
	<div class="header">
		<div class="h_left" @click="router.push('/home')">
			<img src="/weblogo.png" alt="检察院" />
			<ul>
				<li>杨浦区人民检察院</li>
				<li>Yangpu District People's Procuratorate</li>
			</ul>
		</div>
		<div class="h_center">
			<span> 五位一体 </span>
		</div>
		<div class="h_right">
			<img src="../assets/img/timeCount.png" alt="" />
			<span>
				{{ currentYear }}-{{ currentMonth }}-{{ currentDay }}
				{{ currentHour }}:{{
					currentMinute < 10 ? '0' + currentMinute : currentMinute
				}}
			</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, Ref } from 'vue'
import { useRouter } from 'vue-router'
let currentYear: Ref = ref(null)
let currentMonth: Ref = ref(null)
let currentDay: Ref = ref(null)
let currentHour: Ref = ref(null)
let currentMinute: Ref = ref(null)
let timer: Ref = ref(null)
let router = useRouter()
onMounted(() => {
	timer.value = setInterval(() => {
		updateTime()
	}, 1000)
})

onBeforeUnmount(() => {
	clearInterval(timer.value)
})

const updateTime = () => {
	const now = new Date()
	currentYear.value = now.getFullYear()
	currentMonth.value = now.getMonth() + 1 // Months are zero-based, so add 1
	currentDay.value = now.getDate()
	currentHour.value = now.getHours()
	currentMinute.value = now.getMinutes()
}
</script>

<style lang="less" scoped>
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 60px;
	height: 70px;
	// border: 1px solid pink;
	.h_left {
		display: flex;
		align-items: center;
		img {
			width: 66px;
			height: 67px;
			margin-right: 14px;
		}
		ul {
			color: white;
			font-family: PingFang SC;
			li {
				&:first-child {
					font-size: 23px;
					font-weight: 400;
					margin-bottom: 8px;
				}
				&:last-child {
					font-size: 10px;
					font-weight: 300;
				}
			}
		}
	}
	.h_center {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 666px;
		height: 100%;
		background: url('../assets/img/titleCenter.png') center no-repeat;
		font-size: 36px;
		font-family: PingFang SC;
		color: #ccf3ff;
	}
	.h_right {
		img {
			width: 24px;
			height: 24px;
			margin-right: 15px;
		}
		display: flex;
		align-items: center;
		font-size: 24px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #76b6ff;
		line-height: 48px;
	}
}
</style>
